import { defineConfig, loadEnv } from "vite";
import vue from "@vitejs/plugin-vue";
import Components from "unplugin-vue-components/vite";
import { VantResolver } from "unplugin-vue-components/resolvers";
import Unocss from "unocss/vite";
import { presetUno, presetAttributify, presetIcons } from "unocss";

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd());
  console.log(env);
  return {
    server: {
      proxy: {
        [`${env.VITE_VUE_BASE_URL}`]: {
          target: "https://v1.hitokoto.cn",
          changeOrigin: true,
          rewrite: (path) => path.replace(`${env.VITE_VUE_BASE_URL}`, ""),
        },
      },
    },
    plugins: [
      vue(),
      Components({
        resolvers: [VantResolver()],
      }),
      Unocss({
        presets: [
          presetUno(),
          presetAttributify(),
          presetIcons({ scale: 1.2, warn: true }),
        ],
        shortcuts: [
          ["wh-full", "w-full h-full"],
          ["f-c-c", "flex justify-center items-center"],
          ["flex-col", "flex flex-col"],
          ["text-ellipsis", "truncate"],
          [
            "icon-btn",
            "text-16 inline-block cursor-pointer select-none opacity-75 transition duration-200 ease-in-out hover:opacity-100 hover:text-primary !outline-none",
          ],
        ],
        rules: [
          [/^bc-(.+)$/, ([, color]) => ({ "border-color": `#${color}` })],
          [
            "card-shadow",
            {
              "box-shadow":
                "0 1px 2px -2px #00000029, 0 3px 6px #0000001f, 0 5px 12px 4px #00000017",
            },
          ],
        ],
        theme: {
          colors: {
            primary: "var(--primary-color)",
            dark_bg: "var(--dark-bg)",
          },
        },
      }),
    ],
  };
});
